<template>
    <Header title="第五章 排版" />
    <div class="w-full p-4 bg-white shadow-sm">
        <Section title="5.1 文本">
            <p class="mb-2">字体大小。</p>
            <ul class="text-white">
                <li class="p-2 bg-sky-400 mb-4 text-xs">text-xs 12px</li>
                <li class="p-2 bg-sky-400 mb-4 text-sm">text-sm 14px</li>
                <li class="p-2 bg-sky-400 mb-4 text-base">text-base 16px</li>
                <li class="p-2 bg-sky-400 mb-4 text-lg">text-base 18px</li>
                <li class="p-2 bg-sky-400 mb-4 text-xl">text-xl 20px</li>
            </ul>
        </Section>
        <Section title="5.2 斜体">
            <p class="mb-2">字体是否斜体。</p>
            <ul class="text-white">
                <li class="p-2 bg-sky-400 mb-4 text-base italic">
                    text-base 16px
                </li>
                <li class="p-2 bg-sky-400 mb-4 text-base not-italic">
                    text-base 16px
                </li>
            </ul>
        </Section>
        <Section title="5.3 粗体">
            <p class="mb-2">字体是否斜体。</p>
            <ul class="text-black">
                <li class="p-2 font-thin">text-base 16px</li>
                <li class="p-2 font-extralight">text-base 16px</li>
                <li class="p-2 font-light">text-base 16px</li>
                <li class="p-2 font-normal">text-base 16px</li>
                <li class="p-2 font-medium">text-base 16px</li>
                <li class="p-2 font-semibold">text-base 16px</li>
                <li class="p-2 font-bold">text-base 16px</li>
                <li class="p-2 font-extrabold">text-base 16px</li>
                <li class="p-2 font-black">text-base 16px</li>
            </ul>
        </Section>
        <Section title="5.4 字母间距">
            <p class="mb-2">用于控制元素的字母间距。</p>
            <ul class="text-black">
                <li class="p-2 tracking-tighter">text-base 16px</li>
                <li class="p-2 tracking-tight">text-base 16px</li>
                <li class="p-2 tracking-normal">text-base 16px</li>
                <li class="p-2 tracking-wide">text-base 16px</li>
                <li class="p-2 tracking-wider">text-base 16px</li>
                <li class="p-2 tracking-widest">text-base 16px</li>
                <li class="p-2 tracking-[0.2em]">text-base 16px</li>
            </ul>
        </Section>
        <Section title="5.5 文本行数控制">
            <p class="mb-2">用于控制文本的行数。</p>
            <div class="w-xl p-4 bg-sky-400 text-white rounded-xl mb-4">
                <div class="line-clamp-1">
                    Nulla dolor velit adipisicing duis excepteur esse in duis
                    nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt
                    laborum ex occaecat eu tempor labore enim adipisicing minim
                    ad. Est in quis eu dolore occaecat excepteur fugiat dolore
                    nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud
                    eu. Est ut eiusmod consequat irure quis deserunt ex. Enim
                    laboris dolor magna pariatur. Dolor et ad sint voluptate
                    sunt elit mollit officia ad enim sit consectetur enim.
                </div>
            </div>
            <div class="w-xl p-4 bg-sky-400 text-white rounded-xl mb-4">
                <div class="line-clamp-2">
                    Nulla dolor velit adipisicing duis excepteur esse in duis
                    nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt
                    laborum ex occaecat eu tempor labore enim adipisicing minim
                    ad. Est in quis eu dolore occaecat excepteur fugiat dolore
                    nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud
                    eu. Est ut eiusmod consequat irure quis deserunt ex. Enim
                    laboris dolor magna pariatur. Dolor et ad sint voluptate
                    sunt elit mollit officia ad enim sit consectetur enim.
                </div>
            </div>
            <div class="w-xl p-4 bg-sky-400 text-white rounded-xl mb-4">
                <div class="line-clamp-3">
                    Nulla dolor velit adipisicing duis excepteur esse in duis
                    nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt
                    laborum ex occaecat eu tempor labore enim adipisicing minim
                    ad. Est in quis eu dolore occaecat excepteur fugiat dolore
                    nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud
                    eu. Est ut eiusmod consequat irure quis deserunt ex. Enim
                    laboris dolor magna pariatur. Dolor et ad sint voluptate
                    sunt elit mollit officia ad enim sit consectetur enim.
                </div>
            </div>
        </Section>
        <Section title="5.6 文本行数">
            <p class="mb-2">用于控制元素行距或行高的工具。</p>
            <div class="p-4 bg-sky-400 text-white rounded-xl mb-4">
                <div class="leading-6">
                    Nulla dolor velit adipisicing duis excepteur esse in duis
                    nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt
                    laborum ex occaecat eu tempor labore enim adipisicing minim
                    ad. Est in quis eu dolore occaecat excepteur fugiat dolore
                    nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud
                    eu. Est ut eiusmod consequat irure quis deserunt ex. Enim
                    laboris dolor magna pariatur. Dolor et ad sint voluptate
                    sunt elit mollit officia ad enim sit consectetur enim.
                </div>
            </div>
            <div class="p-4 bg-sky-400 text-white rounded-xl mb-4">
                <div class="text-sm/8">
                    Nulla dolor velit adipisicing duis excepteur esse in duis
                    nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt
                    laborum ex occaecat eu tempor labore enim adipisicing minim
                    ad. Est in quis eu dolore occaecat excepteur fugiat dolore
                    nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud
                    eu. Est ut eiusmod consequat irure quis deserunt ex. Enim
                    laboris dolor magna pariatur. Dolor et ad sint voluptate
                    sunt elit mollit officia ad enim sit consectetur enim.
                </div>
            </div>
            <div class="p-4 bg-sky-400 text-white rounded-xl mb-4">
                <div class="leading-[1.6]">
                    Nulla dolor velit adipisicing duis excepteur esse in duis
                    nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt
                    laborum ex occaecat eu tempor labore enim adipisicing minim
                    ad. Est in quis eu dolore occaecat excepteur fugiat dolore
                    nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud
                    eu. Est ut eiusmod consequat irure quis deserunt ex. Enim
                    laboris dolor magna pariatur. Dolor et ad sint voluptate
                    sunt elit mollit officia ad enim sit consectetur enim.
                </div>
            </div>
        </Section>
        <Section title="5.7 列表项标记图片">
            <p class="mb-2">用于控制元素行距或行高的工具。</p>
            <ul
                class="list-image-[url('')] pl-6"
            >
                <li class="mb-2">5 cups chopped Porcini mushrooms</li>
                <li class="mb-2">1/2 cup of olive oil</li>
                <li>3lb of celery</li>
            </ul>
        </Section>
        <Section title="5.8 列表项标记项目符号位置">
            <p class="mb-2">列表中项目符号和数字位置。</p>
            <ul
                class="list-inside text-white w-xl list-disc p-4 bg-sky-400 mb-4"
            >
                <li>第一项</li>
                <li>第一项</li>
                <li>第一项</li>
            </ul>
            <ul class="list-outside text-white w-xl list-disc p-4 bg-sky-400">
                <li>第一项</li>
                <li>第一项</li>
                <li>第一项</li>
            </ul>
        </Section>
        <Section title="5.9 文本下划线">
            <p class="mb-2">定义文本下划线样式。</p>
            <ul class="leading-[2]">
                <li class="overline">
                    The quick brown fox jumps over the lazy dog.
                </li>
                <li class="line-through">
                    The quick brown fox jumps over the lazy dog.
                </li>
                <li class="underline">
                    The quick brown fox jumps over the lazy dog.
                </li>
            </ul>
        </Section>
    </div>
</template>

<script setup>
import Header from "../../components/title";
import Section from "../../components/section";
</script>

<style></style>
